import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'virtual:svg-icons-register'
import App from './App.vue'
import router from './router'
import './styles/index.scss'

// 导入自定义组件
import Card from './components/common/Card.vue'
import StatCard from './components/common/StatCard.vue'
import ChartContainer from './components/common/ChartContainer.vue'
import SearchForm from './components/common/SearchForm.vue'
import Table from './components/common/Table.vue'
import Dialog from './components/common/Dialog.vue'

// 导入自定义指令
import debounce from './directives/debounce'
import permission from './directives/permission'

const app = createApp(App)

// 注册Element Plus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 注册自定义组件
app.component('CommonCard', Card)
app.component('StatCard', StatCard)
app.component('ChartContainer', ChartContainer)
app.component('SearchForm', SearchForm)
app.component('CommonTable', Table)
app.component('CommonDialog', Dialog)

// 注册自定义指令
app.directive('debounce', debounce)
app.directive('permission', permission)

app.use(createPinia())
app.use(router)
app.use(ElementPlus, {
  size: 'default',
  zIndex: 3000
})

app.mount('#app')